<template>
    <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <i class="el-icon-back back fl"></i>
            <div class="fl">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{item}}</el-breadcrumb-item>
            </div>
        </el-breadcrumb>
    </div>
</template>
<script>
    export default {
        name: 'breadcrumb',
        props: {
            breadcrumb: {
                type: Array
            }
        },
    }
</script>
<style scoped lang="less">
    .breadcrumb {
        padding: 20px 20px 5px 20px;
        background-color: #fff;
        position: relative;
        z-index: 1;

        /deep/ .el-breadcrumb {
            line-height: 20px;
        }

        /deep/ .el-breadcrumb__item:last-child {
            .el-breadcrumb__inner {
                color: #3a8ee6 !important;
            }
        }
    }

    .back {
        font-size: 20px;
        margin-right: 10px;
    }

    .fl {
        float: left;
    }
</style>